<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title></title>
    <link href="${basePath}/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="${basePath}/css/scrollbar.css">
    <script src="${basePath}/js/jquery-1.10.2.js"></script>
    <link rel="stylesheet" href="${basePath}/alert/iosOverlay.css">
 	<script src="${basePath}/alert/iosOverlay.js"></script>
 	<script src="${basePath}/js/city.js"></script>
    <script type="text/javascript">
	    $(function(){
	    	var p=parseInt(parseInt("${user.city}")/100);
	  		var c=parseInt(parseInt("${user.city}")%100);
	  		for(var i=0;i<35;i++){
				if(i==p){
					$("#province").append("<option value='"+i+"' selected='selected'>"+province[i]+"</option>");
					continue;
	  			}
	  			$("#province").append("<option value='"+i+"'>"+province[i]+"</option>");
	  		}
	  		for(var i=1;i<city[p].length;i++){
				if(i==c){
					$("#city").append("<option value='"+(p*100+i)+"' selected='selected'>"+city[p][i]+"</option>");
					continue;
	  			}
	  			$("#city").append("<option value='"+(p*100+i)+"'>"+city[p][i]+"</option>");
	  		}
	    });
	    function showCity(){
	    	var pro = $("#province").val();
	    	$("#city").html("");
	    	for(var i=1;i<city[pro].length;i++){
				$("#city").append("<option value='"+(pro*100+i)+"'>"+city[pro][i]+"</option>");
	  		}
	    }
	    var flagNickname = true;
	    function isRightNickname() {
			var nickname = $("#nickname").val();
			if(nickname == "" || nickname.length == 0){
				flagNickname = false;
				iosOverlay({text: "昵称不能为空",duration: 1e3,icon: "${basePath}/alert/cross.png"});
			} else if (nickname.length >10){
				flagNickname = false;
				iosOverlay({text: "昵称最长10位",duration: 1e3,icon: "${basePath}/alert/cross.png"});
			} else {
				flagNickname = true;
			}
		}
	    var flagSignature = true;
	    function isRightSignature(){
	    	var signature = $("#signature").val();
	    	if(signature.length >25){
	    		flagSignature = false;
				iosOverlay({text: "签名最长25位",duration: 1e3,icon: "${basePath}/alert/cross.png"});
			} else {
				flagSignature = true;
			}
	    }
	    function setInfo(){
	    	if(!flagNickname){
	    		iosOverlay({text: "请正确填写昵称",duration: 1e3,icon: "${basePath}/alert/cross.png"});
	    		return;
	    	}
	    	if(!flagSignature){
	    		iosOverlay({text: "请正确填写签名",duration: 1e3,icon: "${basePath}/alert/cross.png"});
	    		return;
	    	}
	    	$("form").submit();
	    }
    </script>
  </head>
  <body>
  	<div style="width:85%;margin: 0px auto;">
  		<div style="width:100%;margin: 30px auto 30px auto;">
		    <form method="post" action="${basePath}/setuserinfo">
		   		 <input type="hidden" value="${user.id }" name="id">
				  <div class="form-group form-group-lg" style="width: 250px;margin: 10px auto 10px auto;">
					  <label class="control-label" for="username">昵称</label>
					  <input type="text" class="form-control" name="nickname" id="nickname" value="${user.nickname}" onblur="isRightNickname()">
					</div>
					<div class="form-group form-group-lg" style="width: 250px;margin: 10px auto 10px auto;">
					  <label class="control-label" for="password">签名</label>
					  <input type="text" class="form-control" name="signature" id="signature" value="${user.signature}" onblur="isRightSignature()">
					</div>
					<div style="width: 250px;margin: 10px auto 10px auto;">
						<label for="sex">性别</label>
						<select class="form-control input-lg" name="sex" id="sex">
						  <option value="0" ${user.sex==0?'selected="selected"':''}>男</option>
						  <option value="1" ${user.sex==1?'selected="selected"':''}">女</option>
						</select>
					</div>
					<div style="width: 250px;margin: 10px auto 10px auto;">
						<label for="sex">省份</label>
						<select class="form-control input-lg" id="province" onchange="showCity()">
						</select>
					</div>
					<div style="width: 250px;margin: 10px auto 20px auto;">
						<label for="sex">城市</label>
						<select class="form-control input-lg" name="city" id="city">
						</select>
					</div>
				  <button type="button" class="btn btn-warning btn-block btn-lg" style="width: 250px;margin: 20px auto 15px auto;" onclick="setInfo()">确认修改</button>
				  <button type="button" class="btn btn-default btn-block btn-lg" style="width: 250px;margin: 15px auto 30px auto;" onclick="location.href='${basePath}/setting'">返回</button>
				</form>
			</div>
	  </div>
    <script src="${basePath}/js/jquery.min.js"></script>
    <script src="${basePath}/js/bootstrap.min.js"></script>
  </body>
</html>